<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/29
  Time: 18:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询作业情况</title>

<style>


    .box3{
        margin-top: 100px;
        margin-left: 500px;
    }
   button{
        width: 100px;
        background-color: darkorange;
        color: aliceblue;
    }
   select{
       width: 100px;
       height: 30px;

   }
   .ts{
       width: 40px;
   }
    table {
        width: 85%;
        background: #ccc;

        border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
        margin-right: 40px;
    }
    th {
        height: 25px;
        line-height: 25px;
        text-align: center;
        border: 1px solid #ccc;
        width: 50px;
    }
    th {
        background: #eee;
        font-weight: normal;

    }
    tr {
        background: #fff;

    }
    tr:hover {
        background: beige;
    }

</style>
    <script type="text/javascript" src="/Eventstar/js/jquery-1.10.2.js" ></script>
    </script>
    <script>
        var  url="http://localhost:9090/Eventstar/work/findwork";
        var  url1="http://localhost:9090/Eventstar/work/find";

        $(function (){

        $("#cx").click(function (){
            $("td").remove();
            $("tr").remove();
            $("table").remove();

            var te1=$(".da").val();
            var myform1={
                "bname":$(".t1").val(),
                "kda":te1,
            }
            $.ajax({
                "url":url,
                "data":myform1,
                "type":"POST",
                "success":function(obj1){
                    $(".box2").append("<table  border='1' class='tab'><tr id='t1' class='cl'><td>姓名</td>");
                    for(var i=1;i<=31;i++){
                        $("#t1").append("<td>"+i+"</td>");
                        $("#t1").css("width","50px");
                    }
                    for(var i=0;i<obj1.length;i++){
                        $(".tab").append("<tr class='cl'><td>"+obj1[i].stname+"</td></tr><br>");
                        var t1=$(".cl");
                        var work=obj1[i].work;
                        console.log(t1[i+1]);
                        for(var j=1;j<=31;j++){
                            if(j==obj1[i].cday &&work==1){
                                $(t1[i+1]).append("<td style='background-color:red'></td>");
                            }else{
                                $(t1[i+1]).append("<td></td>");
                            }
                        }
                    }

                },

            });
        });

            var  te=$(".t1").val();
            var myform={
                "stname":te,
            };
            $.ajax({
                "url":url1,
                "data":myform,
                "type":"POST",
                "success":function(re1){
                    for(var i=0;i<re1.length;i++){
                        $("select").append("<option>"+re1[i].cname+"</option>");
                    }
                },
            });


        });
    </script>
</head>
<body>
<div class="box3">
    <img src="/Eventstar/img/ts1.png" class="ts"/>表格中红色属于未交作业
    <br>
    <br>
    <br>
<select class="t1">
    <option>请选择</option>
</select>
    <input type="date"  class="da">
    <button id="cx">查询</button>
<h2>作业情况</h2>
<div class="box2"></div>
</div>
</body>
</html>
